Template Helpers এবং Custom Helpers তৈরি করা

Ember.js-এ Template Helpers বিশেষভাবে Handlebars টেমপ্লেট ইঞ্জিনের জন্য ব্যবহৃত হয়, যা অ্যাপ্লিকেশনটির ভিউতে ডাইনামিক কনটেন্ট রেন্ডার করতে সহায়ক। Helpers হল এমন ফাংশন যা টেমপ্লেটের ভিতরে ব্যবহৃত হয় এবং ডেটা রেন্ডার করার জন্য লজিক প্রদান করে।

Custom Helpers হল বিশেষভাবে তৈরি করা হেল্পার যা আপনার অ্যাপ্লিকেশনের নির্দিষ্ট প্রয়োজনীয়তা অনুযায়ী কাস্টম লজিক প্রয়োগ করে।

এই গাইডে, আমরা Template Helpers এবং Custom Helpers তৈরি করার পদ্ধতি এবং তাদের ব্যবহার দেখব।

Template Helpers

Ember.js-এর Template Helpers হল Handlebars টেমপ্লেট ইঞ্জিনের সাথে সম্পর্কিত। Ember.js নিজে কিছু বিল্ট-ইন হেল্পার প্রদান করে যেমন {{each}}, {{if}}, {{link-to}}, {{outlet}} ইত্যাদি, যেগুলো সাধারণভাবে টেমপ্লেট রেন্ডার করার সময় ব্যবহার করা হয়।

উদাহরণ: বিল্ট-ইন Template Helpers

1. {{each}}: এটি একটি অ্যারে বা লিস্টের উপর লুপ করে।

   <ul>
     {{#each model.posts as |post|}}
       <li>{{post.title}}</li>
     {{/each}}
   </ul>
   

2. {{if}}: একটি শর্তাধীন টেমপ্লেট হেল্পার যা নির্দিষ্ট শর্তের ভিত্তিতে উপাদান রেন্ডার করে।

   {{#if model.isAuthenticated}}
     <p>Welcome back!</p>
   {{else}}
     <p>Please log in.</p>
   {{/if}}
   

3. {{link-to}}: এই হেল্পারটি একটি লিঙ্ক তৈরি করতে ব্যবহৃত হয় যা নির্দিষ্ট রাউটের সাথে সংযুক্ত থাকে।

   {{link-to 'about' 'about'}}
   

এখানে, link-to হেল্পারটি about রাউটের সাথে একটি লিঙ্ক তৈরি করবে।

Custom Helpers তৈরি করা

আপনি Ember.js-এ কাস্টম হেল্পার তৈরি করতে পারেন যা আপনার অ্যাপ্লিকেশনের জন্য নির্দিষ্ট লজিক বা আচরণ প্রদান করবে। এই কাস্টম হেল্পারগুলো সাধারণত app/helpers/ ফোল্ডারে তৈরি করা হয়।

Custom Helper তৈরি করার ধাপ

1. Ember CLI দিয়ে Helper তৈরি করা

   Ember CLI ব্যবহার করে একটি নতুন হেল্পার তৈরি করতে, আপনি নিচের কমান্ডটি ব্যবহার করতে পারেন:

   ember generate helper format-date
   

   এটি app/helpers/format-date.js ফাইল তৈরি করবে।

2. Custom Helper কনফিগারেশন

   app/helpers/format-date.js ফাইলের মধ্যে আমরা Helper তৈরি করতে পারি:

   import { helper } from '@ember/component/helper';
   
   export function formatDate([date]) {
     let options = { year: 'numeric', month: 'long', day: 'numeric' };
     return new Date(date).toLocaleDateString(undefined, options);
   }
   
   export default helper(formatDate);
   

   এখানে, formatDate হল কাস্টম হেল্পার যা একটি তারিখকে গ্রহণ করে এবং সেটি একটি নির্দিষ্ট ফর্ম্যাটে রেন্ডার করে। এটি toLocaleDateString ব্যবহার করে তারিখটি সুন্দরভাবে প্রদর্শন করবে।

3. Helper ব্যবহার করা

   তৈরি করা কাস্টম হেল্পারটি টেমপ্লেটে ব্যবহার করা যায়:

   <p>Post published on: {{format-date model.postDate}}</p>
   

   এখানে, format-date হেল্পারটি model.postDate এর মান ফরম্যাট করবে এবং তা টেমপ্লেটে রেন্ডার হবে।

Ember.js-এ Common Custom Helpers

এখন কিছু সাধারণ কাস্টম হেল্পার তৈরি করার উদাহরণ দেখি যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হতে পারে:

১. Uppercase Helper

এই হেল্পারটি একটি স্ট্রিংকে বড় হাতের অক্ষরে পরিবর্তন করবে।

// app/helpers/uppercase.js
import { helper } from '@ember/component/helper';

export function uppercase([string]) {
  return string.toUpperCase();
}

export default helper(uppercase);

ব্যবহার:

<p>{{uppercase 'hello world'}}</p>  <!-- HELLO WORLD -->

২. Subtract Helper

এই হেল্পারটি দুটি সংখ্যার মধ্যে পার্থক্য বের করবে।

// app/helpers/subtract.js
import { helper } from '@ember/component/helper';

export function subtract([num1, num2]) {
  return num1 - num2;
}

export default helper(subtract);

ব্যবহার:

<p>{{subtract 10 5}}</p>  <!-- 5 -->

৩. Pluralize Helper

এই হেল্পারটি একটি শব্দের প্লুরাল ফর্ম রেন্ডার করতে ব্যবহৃত হয়।

// app/helpers/pluralize.js
import { helper } from '@ember/component/helper';

export function pluralize([count, word]) {
  return count === 1 ? word : `${word}s`;
}

export default helper(pluralize);

ব্যবহার:

<p>{{pluralize model.commentsCount 'comment'}}</p>  <!-- 5 comments -->

Ember.js-এ Helper এর সুবিধা

1. কাস্টম লজিক তৈরি করা: আপনি যেকোনো ধরনের কাস্টম লজিক তৈরি করতে পারেন যা টেমপ্লেটের ভিতরে সরাসরি ব্যবহার করা যাবে।
2. ডাইনামিক ডেটা রেন্ডারিং: হেল্পারগুলো ডেটার উপর ভিত্তি করে ডাইনামিক রেন্ডারিং সম্ভব করে তোলে।
3. কোড পুনঃব্যবহারযোগ্যতা: একবার তৈরি করা হেল্পার পুনঃব্যবহারযোগ্য এবং অ্যাপ্লিকেশনের বিভিন্ন অংশে ব্যবহার করা যায়।
4. ক্লিন টেমপ্লেট: টেমপ্লেটে জটিল লজিক সরাসরি না রেখে, হেল্পার ব্যবহারে কোড আরও পরিষ্কার এবং সংক্ষিপ্ত হয়।

Template Helpers এবং Custom Helpers এমবারজেএস-এ খুবই গুরুত্বপূর্ণ টুল যা টেমপ্লেটে ডেটা রেন্ডার করার জন্য শক্তিশালী কার্যকারিতা প্রদান করে। Built-in helpers সহজ এবং দ্রুত কাজ করতে সহায়ক, আর Custom helpers আপনাকে আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুযায়ী কাস্টম লজিক তৈরির সুযোগ দেয়। Ember.js-এ এই হেল্পারগুলো ব্যবহার করে আপনি টেমপ্লেটগুলিকে আরও ডাইনামিক এবং কার্যকরী করতে পারেন।